import React, {Component} from 'react';
import {connect} from 'dva';
import {Chart, Geom, Axis, Tooltip, Legend} from 'bizcharts';
import {find} from 'lodash';
import moment from 'moment';
import Card from '../Card';

/* eslint-disable */
// moment.locale('en');
const label = {
  autoRotate: false, // 文本是否需要自动旋转，默认为 true
  textStyle: {
    // textAlign: 'center', // 文本对齐方向，可取值为： start center end
    // fill: '#404040', // 文本的颜色
    // fontSize: '11', // 文本大小
    textBaseline: 'top', // 文本基准线，可取 top middle bottom，默认为middle
  },
  /**
   * 用于格式化坐标轴上显示的文本信息的回调函数
   * @param  {string} text  文本值
   * @param  {object} item  该文本值对应的原始数据记录
   * @param  {number} index 索引值
   * @return {string}       返回格式化后的文本值
   */
  formatter(text, item, index) {
    let arr = text.split('-');
    return `${arr[0]}-${arr[1]}\n${arr[2]}`;
  },
};
const label1 = {
  // textStyle: {
  //   fill: '#404040', // 文本的颜色
  //   fontSize: '11', // 文本大小
  // },
  // formatter(text, item, index) {
  //   return toThousands(text - 0);
  // },
};
const labelY = {
  // textStyle: {
  //   fill: '#404040', // 文本的颜色
  //   fontSize: '11', // 文本大小
  // },
  formatter(text, item, index) {
    if (text && text.indexOf('.') > -1) {
      let textAttr = text.split('.');
      if (textAttr.length > 1) {
        text = textAttr[0];
      }
    }
    return text;
  },
};

class ProjectedTWin extends Component {
  onMouseClick = e => {
    console.log(e);
  };
  getBeforeDate = n => {
    let d = new Date();
    d.setDate(d.getDate() - n);
    let year = d.getFullYear();
    let mon = d.getMonth() + 1;
    let day = d.getDate();
    let s = year + '-' + (mon < 10 ? '0' + mon : mon) + '-' + (day < 10 ? '0' + day : day);
    return s;
  };
  getDefaultDate = () => {
    return [
      {
        periodName: this.getBeforeDate(1),
        dataName: 'T.W.',
        dataValue: 4000,
      },
      {
        periodName: this.getBeforeDate(1),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(2),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(3),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(4),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(5),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(6),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(7),
        dataName: 'A.W.',
        dataValue: 0,
      },
      {
        periodName: this.getBeforeDate(8),
        dataName: 'A.W.',
        dataValue: 0,
      },
    ];
  };

  render() {
    const {
      projectedTWinData=[], grInfo = {
        "grMembId": "3136481",
        "grMembNo": "30030006862",
        "grSegmentCode": "K54S",
        "gdBal": "0.00",
        "gpBal": "219.81",
        "grMembClass": "Classic",
        "grMembClassCode": "CL",
        "grMembClassTier": "CROCKFORDS CLUB",
        "grStatus": "1",
        "actualStatus": "Active",
        "deactivatedReason": null,
        "memberReviewDate": null,
        "roomSeller": false,
        "rtResidentialStatus": "Singaporean / Permanent Resident",
        "creditOutAmt": "2.01",
        "creditAvailAmt": "0.01",
        "creditRedempAmt": "0.01",
        "fundAmtInTran": "0.01",
        "eaApproStatus": "String50",
        "fundsPendF2f": "0.01",
        "depositAcctAmt": "0.01",
        "historyList": [{
          "programCodeLast5": "S123456789",
          "tripNoLast5": "100000",
          "netBuyInAmtLast5": "0.01"
        }, {"programCodeLast5": "S123456789", "tripNoLast5": "200000", "netBuyInAmtLast5": "0.01"}],
        "programCodeCur": "S123456789",
        "tripNoCur": "1000",
        "tripStartDateCur": "20191009",
        "tripEndDateCur": "20191009",
        "netBuyInAmtCur": "0.01",
        "commisRateCur": "0.01",
        "commisPayableCur": "0.01",
        "setBonusRateCur": "0.01",
        "setBonusOnHoldCur": "0.01",
        "setBonusPayCur": "0.01",
        "gdExpirAmtCurMonth": "0.01",
        "gdExpirAmtNextMonth": "0.01",
        "gdRebateAmt": "4000.00",
        "hidPointBal": "2.01"
      }
    } = this.props;
    const colsTodo = {
      dataValue: {
        range: [0, 1],
        // formatter(text) {
        //   return toThousands(text - 0);
        // },
      },
      periodName: {
        // type: "time",
        range: [0, 0.95],
        mask: 'DD-MMM-YYYY',
        // tickInterval: 24 * 3600 * 1000 * 2,
        tickCount: 8,
      },
    };
    const cols = {
      "dataValue": {"range": [0, 1]},
      "periodName": {"range": [0, 0.95], "mask": "DD-MMM-YYYY", "tickCount": 8}
    };
    return (
      <Card title="Last 8 Days">
        <Chart
          height={300}
          padding={['auto', 'auto', 50, 'auto']}
          data={
            grInfo.grStatus !== null && grInfo.grMembNo
              ? projectedTWinData && projectedTWinData.length > 0
              ? projectedTWinData
              : this.getDefaultDate()
              : this.getDefaultDate()
          }
          scale={cols}
          forceFit
        >
          <Axis name="periodName" label={label}/>
          <Axis name="dataValue" label={labelY}/>
          <Legend
            position="top-right"
            marker="circle"
            custom={!(projectedTWinData && projectedTWinData.length > 0)}
            items={[
              {value: 'T.W.', fill: '#FF9B1E', marker: 'circle'},
              {value: 'A.W.', fill: '#2FC25B', marker: 'circle'},
            ]}
          />
          {grInfo.grStatus !== null &&
          grInfo.grMembNo &&
          projectedTWinData &&
          projectedTWinData.length > 0 && (
            <Tooltip
              showTitle={false}
              crosshairs={{
                type: 'line',
              }}
            />
          )}

          <Geom
            tooltip={false}
            type="area"
            adjustType="stack"
            position="periodName*dataValue"
            // color={['dataName', ['l(270) 0:#ffffff 1:#FF9B1E', 'l(270) 0:#ffffff 1:#2FC25B']]}
            color={[
              'dataName',
              dataName => {
                if (dataName === 'T.W.') {
                  return 'l(270) 0:#ffffff 1:#FF9B1E';
                } else {
                  return 'l(270) 0:#ffffff 1:#2FC25B';
                }
              },
            ]}
          />
          {grInfo.grStatus !== null &&
          grInfo.grMembNo &&
          projectedTWinData &&
          projectedTWinData.length > 0 && (
            <Geom
              type="line"
              adjustType="stack"
              position="periodName*dataValue"
              size={2}
              // color={['dataName', ['#FF9B1E', '#2FC25B']]}
              color={[
                'dataName',
                dataName => {
                  if (dataName === 'T.W.') {
                    return '#FF9B1E';
                  } else {
                    return '#2FC25B';
                  }
                },
              ]}
            />
          )}
        </Chart>
      </Card>
    );
  }
}

export default ProjectedTWin;
